<?xml version  = "1.0" 
      encoding = "UTF-8" ?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">    

<ui:composition xmlns    = "http://www.w3.org/1999/xhtml"
				xmlns:f  = "http://java.sun.com/jsf/core"
				xmlns:h  = "http://java.sun.com/jsf/html"
	            xmlns:p  = "http://primefaces.org/ui"				
				xmlns:ui = "http://java.sun.com/jsf/facelets"
	            template = "/layout/layoutPrincipal.xhtml">
	
	<ui:define name = "Conteudo">
		<meta http-equiv = "refresh" 
	   	      content    = "120" />
		<h:form>
			<p:fieldset id = "frLogin"  
			            style = "left       :200px; 
			            		 text-align :center; 
			                     position   :absolute;  
			                     left       :50%; 
			                     top        :50%; 
			                     width      :450px; 
			                     height     :200px; 
			                     margin-top :-100px; 
			                     margin-left:-250px;
			                     padding    :0px;">
				<table border = "0" 
				       width  = "100%" >
					<tr>
						<td style = "background-color :#193263; 
						             height           :30px;">
							<p:outputLabel value = "Login de Recadastramento"
							               style = "font-size  :20px; 
							                        font-weight:bold; 
							                        color      :#D8D8D8;" />
						</td>
					</tr>
				</table>			                                   
				<table border = "0" 
				       width  = "100%" >
					<tr>
						<td align = "center">
							<table border = "0" >
								<tr>
									<td style = "text-align :left; 
									             width      :120px;" >
										<p:outputLabel for   = "txCpf"
									                   value = "CPF" />
									</td>
									<td style = "text-align :left; 
									             width      :99px;">
					 					<p:inputMask id              = "txCpf"
						                   			 mask            = "999.999.999-99"
						                   			 value           = "#{loginMB.cpf}"
						                   			 size            = "12"
						                   			 requiredMessage = "CPF: o valor e necessário"
													 required        = "true" />
										<p:focus     for             = "txCpf" />										 
									</td>
									<td style = "text-align: left;">
										<p:message for = "txCpf" />						
									</td>
								</tr>
								<tr>
									<td style = "text-align: left;" >
										<p:outputLabel value = "Senha" 
												       for   = "txSenha"/>
									</td>
									<td style = "text-align: left;">
										<p:password id              = "txSenha"
													size            = "12"
													requiredMessage = "Senha: o valor e necessário"
						                   			value           = "#{loginMB.senha}"							
					                                required        = "true"/>
									</td>
									<td>
					            		<p:message for = "txSenha"  />						
									</td>					
								</tr>
								<tr>
									<td style = "text-align: left;" >
										<p:outputLabel value = "Código" />
									</td>
									<td colspan = "2" 
									    style   = "text-align: left;" >
										<img src     = "GeraImagemRandomica?param=#{loginMB.numeroCriptografado}" 
										     style   = "width: 95px;"/>
										<a   href    = "audioCaptcha?param=#{loginMB.numeroCriptografado}" 
										     title   = "Baixar audio do código de autorização">
											<img src = "layout/imagens/baixar_audio_do_codigo_de_autorizacao.png" />
										</a>
						 			</td>
					  			</tr>
					  			<tr>
					  				<td style = "text-align: left;">
										<p:outputLabel value = "Informe o Código" 
										               for   = "txCaptcha" />
					  				</td>
									<td style = "text-align: left;">
										<p:inputText id              = "txCaptcha"
													 size            = "12"
													 required        = "true"
													 requiredMessage = "Código: o valor e necessário"
										             maxlength       = "6"
			                                         value           = "#{loginMB.numeroInformado}"/>
									</td>
									<td>
										<p:message for = "txCaptcha"/> 
									</td>
								</tr>
								<tr>
									<td style = "height        :50px; 
									             vertical-align:middle;">
										<p:commandButton value  = "Login" 
													     update = ":frLogin"
													     ajax   = "false"
													     action = "#{loginMB.login}"/>
									</td>
									<td colspan = "2">
								    <p:commandButton  value          = "Limpar"
								                      style          = "margin-left : 30px;" 
								                      actionListener = "#{loginMB.limpar}" 
								                      immediate      = "true"
								                      ajax           = "false">
								        <p:resetInput target         = "frLogin"/>
								    </p:commandButton>
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
	   		</p:fieldset>
		    <p:panel id       = "pnAviso" 
		             style    = "border: none;" 
		             rendered = "#{loginMB.exibirAviso}" >
			    <div id    = "aviso"
			         style = "position    :absolute;
			                  top         :50%;
			                  left        :50%;
			                  width       :426px;
			                  height      :450px;
			                  margin-top  :-240px;
			                  margin-left :-220px;
			                  border      :0px">
					<img src     = "layout/imagens/lembreteLogin.png"/>
					<img src     = "layout/imagens/botaoFechar.png"
					     title   = "Clique aqui para fechar este Aviso."
					     onclick = "document.getElementById('aviso').style.visibility = 'hidden'" 
					     style   = "position   :absolute;
					                cursor     :pointer;
					                margin-left:-45px; 
					                z-index    :1000;"/>
			    </div> 
		    </p:panel>
    	</h:form> 
	</ui:define>		
</ui:composition>